<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算余额</title>
  <style>
    h2 {
      text-align: center;
    }

    /* border-collapse: collapse;：这个属性设置表格的边框是否被合并为一个单一的边框，或者是像默认的那样保持分离。
        collapse值意味着表格的边框会被合并为一个边框，这在创建紧凑的表格布局时很有用。 */
    /* height: 50px;：这个属性设置表格的高度为50像素。这意味着无论表格内容多少，表格的高度都将被限制在50像素以内。
      如果内容超出了这个高度，它可能会溢出或者被截断，这取决于其他的CSS样式设置（比如overflow属性）。 */
    /* margin: 0 auto;：这个属性用来设置表格的外边距。0表示上下外边距为0，
      auto表示左右外边距将自动调整，以使表格在其父容器中水平居中。这是一种常用的让元素在其父容器中水平居中的方法。 */
    /* text-align: center;：这个属性设置表格中文本的对齐方式为居中。这意味着表格内的文本、单元格内容等都会在其单元格内居中显示。 */
    table {
      border-collapse: collapse;
      height: 50px;
      margin: 0 auto;
      text-align: center;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>

</head>

<body>
  <h2>计算银行卡余额</h2>
  <script>
    let ze = prompt("请输入你的银行卡总额")
    let df = prompt("请输入你的电费")
    let sf = prompt("请输入你的水费")
    let wf = prompt("请输入你的网费")
    let ye = ze - df - sf - wf
    document.write(`
      <table>
        <tr>
          <th>银行卡总额</th>
          <th>电费</th>
          <th>水费</th>
          <th>网费</th>
          <th>银行卡余额</th>
        </tr>
        <tr>
          <td>${ze}</td>
          <td>${df}</td>
          <td>${sf}</td>
          <td>${wf}</td>
          <td>${ye}</td>
        </tr>
      </table>
    `)
  </script>
</body>

</html>